<template>
  <!-- 管线弹窗信息展示 -->
  <div v-if="infoLine" class="lineInfo animate__animated animate__zoomIn">
    <div>
      <img src="@/assets/dashboard/close.png" class="close_img" @click="$emit('closeInfoWindow')" />
      <div class="flexBoxTitle">
        <div class="title">{{ infoLine.areaName }}{{ infoLine.pipType == 1 ? '雨水管' : '污水管' }}</div>
        <div :class="infoLine.status == 1 ? 'xianzhuang' : 'guihua'">
          {{ infoLine.status == 1 ? '现状' : '规划' }}
        </div>
      </div>
      <div class="title2"><img src="@/assets/dashboard/gx.png" />管道信息</div>
      <div class="flexBox">
        <div>
          <div>
            管材：
            <span class="blueGradient">{{ infoLine.pipMaterial | formatPipDiameter(guancaiTypeList) }}</span>
          </div>
          <div>
            起点埋深：<span class="blueGradient">{{ infoLine.burialDepthSt }}m</span>
          </div>
          <div>
            起点：<span class="blueGradient">{{ infoLine.pipPointSt }}</span>
          </div>
          <div>
            管道长度：<span class="blueGradient">{{ infoLine.hieght }}m</span>
          </div>
        </div>
        <div>
          <div>
            管径：<span class="blueGradient">{{ infoLine.pipDiameter | formatPipDiameter(guanjingTypeList) }}mm</span>
          </div>
          <div>
            终点埋深：<span class="blueGradient">{{ infoLine.burialDepthEd }}m</span>
          </div>
          <div>
            终点：<span class="blueGradient">{{ infoLine.pipPointEd }}</span>
          </div>
        </div>
      </div>
      <div class="areaName">
        所属区域：<span class="blueGradient">{{ infoLine.areaName }}</span>
      </div>
      <div v-if="infoLine.facilityId && facilityList.length" class="areaName">
        污水处理厂：<span class="blueGradient">{{ infoLine.facilityId | formatFacility(facilityList) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDictItemListByCode } from '@/api/system'

export default {
  name: 'LineInfoWindow',
  props: {
    infoLine: {
      type: Object,
      default() {
        return null
      }
    },
    facilityList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  filters: {
    formatPipDiameter(gj, guanjingTypeList) {
      let obj = guanjingTypeList.find(item => item.value == gj)
      if (obj) {
        return obj.name
      } else {
        return '--'
      }
    },
    formatFacility(id, facilityList) {
      console.log('formatFacility', id, facilityList)
      let obj = facilityList.find(item => item.value === id + '')
      if (obj) {
        return obj.label
      } else {
        return '--'
      }
    }
  },
  data() {
    return {
      guanjingTypeList: [],
      guancaiTypeList: []
    }
  },
  created() {
    this.getPipDiameterFun('ps_pip_diameter')
    this.getPipMaterialFun('ps_pip_material')
  },
  methods: {
    // 获取管径类型枚举
    async getPipDiameterFun(dictCode) {
      const res = await getDictItemListByCode({ dictCode })
      this.guanjingTypeList = (res.result || []).map(x => {
        return {
          name: x.itemText,
          value: x.itemValue
        }
      })
    },
    async getPipMaterialFun(dictCode) {
      const res = await getDictItemListByCode({ dictCode })
      this.guancaiTypeList = (res.result || []).map(x => {
        return {
          name: x.itemText,
          value: x.itemValue
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.lineInfo {
  box-sizing: border-box;
  position: relative;
  width: 350px;
  height: 230px;
  background: url('~@/assets/dashboard/lineInfo_bj.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 20px 10px 20px;
  font-size: 14px;
  color: #ffffff;
}
span {
  font-weight: 700;
  //cursor: pointer;
  background: linear-gradient(-0deg, #15b2f4 100%, #45faff 100%);
  -webkit-background-clip: text;
  color: transparent;
}
.flexBoxTitle {
  display: flex;
  //justify-content: start;
  align-items: center;
  .xianzhuang {
    padding: 0 4px;
    margin-left: 4px;
    background-image: linear-gradient(270deg, #15b2f4 0%, #45faff 100%);
    border-radius: 2px;
    font-size: 14px;
  }

  .guihua {
    padding: 0 4px;
    margin-left: 4px;
    background-image: linear-gradient(270deg, #f4d115 0%, #ffbb45 100%);
    border-radius: 2px;
    font-size: 14px;
  }
  .title {
    height: 43px;
    line-height: 43px;
    font-size: 16px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

.present-situation {
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 12px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(270deg, #15b2f4 0%, #45faff 100%);
  border-radius: 2px;
}
.plan {
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 12px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(270deg, #f4d115 0%, #ffbb45 100%);
  border-radius: 2px;
}

.title2 {
  margin-top: 10px;
  img {
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
  }

  span {
    line-height: 20px;
  }
}

.flexBox {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.areaName {
  font-weight: 700;
}

.close_img {
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
}
</style>
